<template>
	<view v-if="userInfo!==null" style="display: flex;justify-content: center;">
		<view style="width: 92%;margin-top: 20rpx;">
			<view style="display: flex;justify-content: space-between;">
				<view>头像</view>
				<view @click="updateAvatar" style="display: flex;align-items: center;">
					<img style="width: 100rpx;" :src="userInfo.userAvatar" alt="">
					<uni-icons type="arrowright" size="20" color="#C0C0C0"></uni-icons>
				</view>
			</view>
			<view style="margin-top: 40rpx;">
				<uni-forms :value="userInfo">
					<uni-forms-item label="昵称" name="userUsername">
						<uni-easyinput type="text" v-model="userInfo.userUsername" placeholder="请输入昵称" />
					</uni-forms-item>
					<uni-forms-item label="性别">
						<radio-group @change="getRadioValue">
							<radio value="1" :checked="userInfo.userSex==1" />男
							<radio style="margin-left: 20rpx;" value="0" :checked="userInfo.userSex==0" />女
						</radio-group>
					</uni-forms-item>
					<uni-forms-item label="QQ" name="userQq">
						<uni-easyinput type="text" v-model="userInfo.userQq" placeholder="请输入QQ" />
					</uni-forms-item>
					<uni-forms-item label="微信" name="userUsername">
						<uni-easyinput type="userVx" v-model="userInfo.userVx" placeholder="请输入微信号" />
					</uni-forms-item>
					<button @click="updateUserInfo" type="primary">更新个人信息</button>
				</uni-forms>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: null
			}
		},
		onLoad() {
			// 获取用户信息
			this.getUserInfo()
		},
		onBackPress(e) {
		// 这里可以自定义返回逻辑，比如下面跳转其他页面
			uni.switchTab({
				url: '/pages/my/my'
			});
			return true
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				this.$http.request({
					url: '/organizations/web/user/info'
				}).then(res => {
					res = res.data;
					if (res.result) {
						this.userInfo = res.data;
					} else {
						uni.showToast({
							title: res.data,
							icon: 'none'
						});
					}
				})
			},
			// 更新头像
			updateAvatar() {
				var that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						that.$http.request({
							url: '/organizations/web/user/updateAvatar',
							method: 'POST',
							filePath: res.tempFilePaths[0],
							name: 'file',
							type: 'upload'
						}).then(res => {
							res = JSON.parse(res.data)
							if (res.result) {
								// 提示更换成功
								uni.showToast({
									title: res.msg
								})
								// 重新获取数据
								that.getUserInfo()
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								});
							}
						});
					}
				});
			},
			getRadioValue(evt) {
				this.userInfo.userSex = evt.detail.value
			},
			updateUserInfo() {
				this.$http.request({
					url: '/organizations/web/user/updateUser',
					method: 'POST',
					data: {
						"nickName": this.userInfo.userUsername,
						"qq": this.userInfo.userQq,
						"sex": this.userInfo.userSex,
						"vx": this.userInfo.userVx
					}
				}).then(res => {
					res = res.data;
					if (res.result) {
						uni.showToast({
							title: res.msg
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style>
</style>
